<script setup lang="ts">
import EChart from "~/contentScripts/views/echart.vue";

const props = defineProps({
  data: {
    type: Object,
  },
  mapIndexes: {},
});
const tabIndex = ref<Number>(0);
// 性别 Echart
const genderChartOptions = ref<any>({});
const calcOptions = (type: string, field: string) => {
  let names: Array<string> = [];
  const option: any = {
    // 标题
    title: {
      text: (type === 'gender' ? '性别' : type === 'age' ? '年龄' : '职业') + '分析',
      left: 0,
      top: 20,
      textStyle: {
        color: '#444',
        fontSize: 12,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        data: props.data.gender.payByrCntRate.map((item: any) => {
          return (item.value * 100).toFixed(2)
        }),
      },
    ]
  };
  option.series[0].data = props.data[type][field].map((item: any) => {
    if (type == 'career') {
      names.push(item.name)
    } else {
      names.push(props.mapIndexes[type][item.name])
    }
    return (item.value * 100).toFixed(2)
  })
  option.xAxis[0].data = names;
  switch (type) {
    case 'gender':
      genderChartOptions.value = option;
      break;
    case 'age':
      ageChartOptions.value = option;
      break;
    case 'career':
      careerChartOptions.value = option;
      break;
  }
}
const calc = () => {
  let field;
  if (tabIndex.value === 0) {
    field = 'payByrCntRate';
  } else {
    field = 'payRateIndex';
  }
  calcOptions('gender', field);
  calcOptions('age', field);
  calcOptions('career', field);
}
watch(() => props.data, () => {
  if (props.data) {
    calc();
  }
}, {
  deep: true
})

watch(() => tabIndex.value, () => {
  calc();
})
onMounted(() => {
  calc();
})
// 年龄
const ageChartOptions = ref<any>({});
// 职业
const careerChartOptions = ref<any>({});
</script>

<template>
  <div class="tabs">
    <div class="item" :class="{
      active:tabIndex===0
    }" @click="()=>tabIndex=0"
    >
      买家数占比
    </div>
    <div style="width: 50px;"></div>
    <div class="item" :class="{
      active:tabIndex===1
    }" @click="()=>tabIndex=1"
    >
      支付转化率
    </div>
  </div>
  <a-row type="flex">
    <a-col flex="1" style="padding: 0 20px;overflow: hidden;">
      <EChart :options="genderChartOptions" style="height: 300px"/>
    </a-col>
    <a-col flex="1" style="padding: 0 20px;overflow: hidden;">
      <EChart :options="ageChartOptions" style="height: 300px"/>
    </a-col>
    <a-col flex="1" style="padding: 0 20px;overflow: hidden;">
      <EChart :options="careerChartOptions" style="height: 300px"/>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>
.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;

  .item {
    border-radius: 5px;
    padding: 10px 30px;
    cursor: pointer;
    border: 2px solid #eee;
    font-size: 16px;
    // 阴影
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    &.active, &:hover {
      border: #1890ff solid 2px;
    }
  }
}
</style>
